{% extends 'base.html' %}
{% load static %}

{% block title %}积分明细 - 本地有约{% endblock %}

{% block content %}
<div class="container py-4">
    <!-- 积分概览 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-center bg-primary text-white">
                <div class="card-body">
                    <h4>{{ point_summary.total_points }}</h4>
                    <p class="mb-0">当前积分</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center bg-success text-white">
                <div class="card-body">
                    <h4>{{ point_summary.today_points }}</h4>
                    <p class="mb-0">今日获得</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center bg-info text-white">
                <div class="card-body">
                    <h4>{{ point_summary.level }}</h4>
                    <p class="mb-0">当前等级</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center bg-warning text-white">
                <div class="card-body">
                    <h4>{{ point_summary.total_earned }}</h4>
                    <p class="mb-0">总获得积分</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 等级进度 -->
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">等级进度</h5>
            <div class="progress mb-2" style="height: 20px;">
                <div class="progress-bar bg-success" role="progressbar"
                     style="width: {{ point_summary.progress_percentage }}%">
                    {{ point_summary.progress_percentage }}%
                </div>
            </div>
            <div class="d-flex justify-content-between">
                <small>当前经验: {{ point_summary.experience }}</small>
                <small>下一等级: {{ point_summary.next_level_exp }}</small>
            </div>
        </div>
    </div>

    <!-- 积分记录 -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">积分记录</h5>
            <a href="{% url 'location:point_rules' %}" class="btn btn-outline-primary btn-sm">
                <i class="fas fa-gift me-1"></i>积分规则
            </a>
        </div>
        <div class="card-body p-0">
            {% if transactions %}
            <div class="list-group list-group-flush">
                {% for transaction in transactions %}
                <div class="list-group-item">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">{{ transaction.description }}</h6>
                            <small class="text-muted">{{ transaction.created_at|date:"Y-m-d H:i" }}</small>
                        </div>
                        <div class="text-end">
                            <span class="{% if transaction.transaction_type == 'earn' or transaction.transaction_type == 'refund' %}text-success{% else %}text-danger{% endif %} fw-bold">
                                {% if transaction.transaction_type == 'earn' or transaction.transaction_type == 'refund' %}+{% else %}-{% endif %}
                                {{ transaction.points }}
                            </span>
                            <div>
                                <small class="text-muted">{{ transaction.get_source_type_display }}</small>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-5">
                <i class="fas fa-coins fa-3x text-muted mb-3"></i>
                <p class="text-muted">还没有积分记录</p>
                <a href="{% url 'location:point_rules' %}" class="btn btn-primary">查看如何获得积分</a>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}